<template>
    <NCard title="万事达卡配置">
        <NForm :model="form" inline>
            <NFormItem label="开卡费" path="cardPrice">
                <NInput v-model:value="form.cardPrice" placeholder="请输入">
                    <template #suffix> USDT </template>
                </NInput>
            </NFormItem>
            <NFormItem label="转入费率" path="carryInRate">
                <NInput v-model:value="form.carryInRate" placeholder="请输入">
                    <template #suffix>%</template>
                </NInput>
            </NFormItem>
            <NFormItem>
                <NButton type="primary" @click="submit" :loading="loading">确定</NButton>
            </NFormItem>
        </NForm>
    </NCard>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { updateMasterCardConfig } from '@/api/config'
import { useMessage } from 'naive-ui'

const { config } = defineProps<{
    config: Api.Config.MasterCardConfig | null
}>()

const message = useMessage()
const form = ref<Api.Config.MasterCardConfig>({
    cardPrice: '',
    carryInRate: ''
})

watchEffect(() => {
    if (config) {
        form.value.cardPrice = config.cardPrice
        form.value.carryInRate = config.carryInRate
    }
})

const loading = ref(false)
async function submit() {
    loading.value = true
    const [err, res] = await updateMasterCardConfig(form.value)
    loading.value = false
    if (!err && res) {
        message.success('操作成功')
    }
}
</script>
